<template>
    <div class="create-poems">
        <el-dialog v-model="isShowDialog" width="100%" title="创建诗单" align-center :show-close="false" @close="onCancel()">
            <div>
                <el-input placeholder="诗单名（最多20个字）" maxlength="20" v-model="name"></el-input>
                <span class="empty-tip" v-if="isShowErrorTip">请输入诗单名</span>
                <el-switch v-model="isPrivate" class="ml-2" 
                style="--el-switch-on-color: var(--switch-color-active); --el-switch-off-color: var(--switch-color)"
                active-text="设置为私密诗单"/>
            </div>
            <template #footer>
            <span class="dialog-footer">
                <el-button @click="onConfirm()" class="confirm-btn">确定</el-button>
            </span>
            </template>
        </el-dialog>
    </div>
    <error-alert :message="errorMessage" ref="showErrorAlert"></error-alert>
</template>

<script setup lang="ts">
import { ref, watch } from "vue"
import userInfoStore from '../user-info.store'

const userInfoSe = userInfoStore() 
let isPrivate = ref<boolean>(false)

const emits = defineEmits(['closeAlert'])
let isShowDialog = ref<boolean>(true)
let name = ref<string>('')
let errorMessage = ref<string>('')
let showErrorAlert = ref<any>(null)
let isShowErrorTip = ref<boolean>(false)
watch(() => name.value, (n: string, o: string) => {
    if(!n || n == '') {
        isShowErrorTip.value = true
    } else {
        isShowErrorTip.value = false
    }
})

const onConfirm = () => {
    if(!name.value || name.value == '') {
        isShowErrorTip.value = true
        return
    } else {
        isShowErrorTip.value = false
    }
    const data = {
        pl_name: name.value,
        make_private: isPrivate.value ? '1' : '0'
    }
    userInfoSe.getUserCreatePoemsList(data).then((res: any) => {
        if(res.status == 'success') {
            emits('closeAlert', 'success')
        } else {
            errorMessage.value = '创建诗单失败！'
            showErrorAlert.value.showErrorAlert()
        }
    })
}
const onCancel = () => {
    emits('closeAlert', 'failure')
}
</script>

<style lang="less" scoped>
.create-poems {
    :deep(.el-dialog) {
        width: 16rem;
        background-color: var(--bg-color-white);
        .el-dialog__title {
            font-weight: 600;
            color: var(--font-color-black);
        }
        .el-dialog__body {
            padding-top: 1rem;
            padding-bottom: 1rem;
        }
        .el-input__wrapper {
            &:focus {
                box-shadow: none;
                border: none;
            }
            &:hover {
                box-shadow: 0 0 0 1px var(--el-input-border-color,var(--el-border-color)) inset;
            }
        }
        .el-input__inner {
            &::placeholder {
                color: var(--placeholder-color);
                font-size: 15px;
            }
        }
        .el-dialog__footer {
            padding-top: 0;
            .el-button {
                border: none;
                background-color: transparent;
                span {
                    font-weight: 600;
                    color: var(--font-color-green);
                }
            }
        }
    }
    .empty-tip {
        color: var(--font-color-red);
        font-size: 12px;
    }
}
</style>